<template>
  <div>
    <a-button type="primary" class="choose-material"
              style="margin-left: 0; margin-bottom: 10px;"
              @click="showVideoMaterial()">从素材库选择音频
    </a-button>
    <div v-if="voiceUrl">
      <audio controls="controls" :src="voiceUrl"></audio>
    </div>
    <div v-else class="videoBox mediaNameLink" style="width: 50%;">
      <img src="~@assets/music.png" title="播放"/>
    </div>
    <j-modal
      width="60%"
      title="选择音频"
      :visible.sync="visible"
      @ok="handleOk">
      <a-input-search style="width: 50%" placeholder="请输入标签名称" v-model="queryParam.remark"
                      @search="loadData(1)"></a-input-search>
      <a-spin :spinning="loading">
        <a-row>
          <a-col class="item" :span="4" v-for="(item) in dataSource" @click="checkItem(item)">
            <div class="item-img-container">
              <img class="item-img" src="~@assets/music.png">
              <div class="item-bottom-mask">
                <a-icon @click="preview(item.materialUrl)" type="play-circle" title="预览"/>
              </div>
            </div>
            <div class="item-name">{{item.remark}}</div>
            <a-radio class="item-radio" :checked="checkedItem.materialUrl===item.materialUrl"></a-radio>
          </a-col>
        </a-row>
      </a-spin>
      <a-pagination @change="loadData" style="text-align: right" v-model="ipagination.current"
                    :total="ipagination.total"
                    show-less-items></a-pagination>
    </j-modal>
    <a-modal title="音频预览"
             :visible="previewVisible"
             :footer="null"
             @cancel="previewVisible = false"
             class="pop-table"
             :closable="false">
      <audio controls="controls" :src="previewUrl"
             v-if="previewVisible" style="margin:30px 0;transform: translate(0, 0);width:100%"></audio>
    </a-modal>
  </div>
</template>

<script>
  import {JeecgListMixin} from '@/mixins/JeecgListMixin'

  export default {
    name: "AudioChose",
    mixins: [JeecgListMixin],
    model: {
      prop: 'voiceUrl',
      event: 'change'
    },
    props: ['voiceUrl'],
    data() {
      return {
        visible: false,
        queryParam: {
          materialType: 3
        },
        url: {
          list: 'materia/crdMaterialInfo/list'
        },
        checkedItem: '',
        previewUrl: '',
        previewVisible: false,
      }
    },
    methods: {
      showVideoMaterial() {
        this.visible = true;
      },
      handleOk() {
        if (this.checkedItem) {
          this.$emit('change', this.checkedItem.materialUrl);
        }
      },
      getQueryField() {
        return ''
      },
      //选中某一条
      checkItem(item) {
        this.checkedItem = item;
      },
      preview(url) {
        this.previewUrl = url;
        this.previewVisible = true;
      }
    }
  }
</script>

<style scoped lang="less">
  .mediaNameLink {
    color: #40a9ff;
    text-decoration: underline;
    cursor: pointer;
    height: 80px;
    line-height: 80px;
    background-color: #eff2f5;
    margin-right: 20px;
    text-align: center;
  }

  .item {
    position: relative;
    margin: 5px;
    overflow: hidden;

    &-img {
      width: 100%;
      max-height: 120px;

      &-container {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        height: 120px;
        border: 1px dotted #ededed;
        background-color: rgba(153, 153, 153, 0.13);
      }
    }

    &-name {
      text-align: center;
    }

    &-radio {
      position: absolute;
      top: 5px;
      left: 10px;
    }

    &-bottom-mask {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: rgba(0, 0, 0, 0.6);
      text-align: right;
      padding: 3px 8px;

      i {
        font-size: 16px;
        color: white;
      }
    }
  }


</style>
